<!-- 日常分区帖子总览 -->
<template>
  <view class="content" :style="{'height':vHeight + 'vh'}">
    <div> <!-- 左上角用户小窗组件 -->
      <userAvatarBar></userAvatarBar>
    </div>
    <div class="partitionText"> <!-- 分区提示 -->
      <text style="color: #FFBF6B; font-size: 50px;">日常贴</text>
    </div>
    <div> <!-- 返回按钮 -->
      <back-button></back-button>
    </div>
    <!-- 搜索框 -->
    <view class="search-bar">
      <view class="search-bar-box">
        <image class="search-span" src="/static/icon/post/searchSpan.png" />
        <input v-model="searchText" type="text" placeholder="请选择下列类型,并输入搜索内容" class="search-text" maxlength="10"
          @confirm="search" />
        <button @click="search" class="search-btn">搜索</button>
      </view>
    </view>
    <!-- 下拉类型筛选 -->
    <div class="filter">
      <label><text
          style="width: 100%; margin-top: 10rpx; margin-left: 20rpx; font-size: 30rpx; color: #313131;">日常类型：</text></label>
      <picker class="picker" @change="handlePickerChange" :value="index" :range="kindList" range-key="name">
        <view>
          {{ kindList[index].name }}
        </view>
      </picker>
    </div>
    <!-- 帖子内容 -->
    <div style="margin-top: 5%;">
      <div class="dailyPost_List" v-for="(item,index) in postList" :key="index" @click="goTopostDetail(item,index)">
        <!-- 帖子用户头像名称 -->
        <div style="display: inline;">
          <button class="otheruser-icon" plain="true"
            @click="() => goToOwnSpace(item.userId, item.userName, item.iconUrl)">
            <image :src="`https://flyingfeather-1320611290.cos.ap-guangzhou.myqcloud.com/${item.iconUrl}`"
              mode="aspectFill" style="height: 60px; width: 60px;  border-radius: 100%;">
            </image>
          </button>
          <text
            style="font-size: 15px; color: black; margin-top: 5%; position: absolute; top: 0%; left: 10%;">{{item.userName}}</text>
        </div>
        <!-- 帖子具体内容 -->
        <div>
          <!-- 右上角 -->
          <div class="dailyText1">
            <text>类型：{{dailyType[item.type]}}</text>
          </div>
          <!-- 内容 -->
          <div class="dailyText2">
            <text>{{item.content}}</text>
          </div>
          <div class="dailyText3">
            <text>发布时间：{{getTime(item.createTime)}}</text>
          </div>
          <div>
            <button class="dailyLike_Button" plain="true">
              <image src="/static/icon/post/like1.png" mode="aspectFill" style="height: 20px; width: 20px; "></image>
            </button>
            <text class="dailyLike_Amount">{{item.likes}}</text>
          </div>
        </div>
      </div>
    </div>
  </view>
</template>

<script>
  import userAvatarBar from '@/components/userAvatarBar/userAvatarBar.vue'
  import backButton from '@/components/backButton/backButton.vue'
  export default {
    components: {
      userAvatarBar, //左上角用户小窗组件
      backButton //返回按钮
    },
    data() {
      return {
        tarId: '',
        tarName: '',
        chooseAvatar: '',
        postList: [],
        isloading: false, //是否在加载
        requestcontent: true, //后端帖子是否已经到底
        startId: 0,
        dailyType: ['日常分享', '技能提升', '吐槽'],
        vHeight: 200, //页面初始高度
        kindList: [{
            name: "全部",
            id: 3
          },
          {
            name: "日常分享",
            id: 0
          },
          {
            name: "技能提升",
            id: 1
          },
          {
            name: "吐槽",
            id: 2
          },
        ],
        index: 0,
        dailyShortType: 3, //初始类型设置为3，代表全部
        searchText: '', //输入框的值
        searchResults: [] //搜索到的帖子内容
      }
    },
    onLoad(options) { //加载页面加载帖子
      this.getPost()
    },
    onReachBottom() { //触底加载
      if (this.isloading) return //防止加载重复加载
      if (this.requestcontent) {
        this.getPost()
        this.vHeight += 150 //页面大小每次增加100vh
      }
    },
    onPullDownRefresh() { //刷新帖子
      this.startId = 0;
      this.postList = [];
      this.getPost();
      setTimeout(function() {
        uni.stopPullDownRefresh();
      }, 1000);
    },
    methods: {
      getPost() { //获取帖子 6个
        this.isloading = true,
          wx.showLoading({
            title: '加载中',
          })
        uni.request({
          url: 'http://localhost:8081/blog/daily/page/' + this.startId,
          header: {
            'Content-Type': 'application/json', //自定义请求头信息
            'Access-Control-Allow-Headers': 'appId',
            'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
            'Access-Control-Max-Age': 86400,
            'Authorization': '' + wx.getStorageSync('sessionID')
          },
          method: 'GET',
          success: res => {
            if (res.data.data.length == 0) { //如果后端帖子到底
              this.requestcontent = false
              wx.showToast({
                title: '已经到底啦~',
                icon: 'none',
                duration: 1500,
                mask: true
              })
            } else {
              this.requestcontent = true; //表明后台还有帖子
              res.data.data.forEach(item => { //将帖子保存进postList
                this.postList.push(item);
              })
              this.startId = this.postList[this.postList.length - 1].id; //获取最后一个帖子的id，用于加载下一波帖子
              console.log(this.postList);
            }
          },
          complete: () => {
            wx.hideLoading(),
              this.isloading = false
          }
        })
      },
      getTime(time) { //转换时间戳
        var date = new Date(time);
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var D = date.getDate() + ' ';
        var Time = Y + M + D;
        return Time
      },
      handlePickerChange: function(e) { //筛选器
        this.index = e.detail.value; //设置筛选器下标
        this.dailyShortType = this.kindList[this.index].id; //设置当前选择的球局类型下标
        console.log(this.dailyShortType);
      },
      search() {
        if (!wx.getStorageSync('sessionID')) {
          uni.showToast({
            title: '请先登录!',
            icon: 'none',
            duration: 3000
          });
          return;
        }
        //搜索方法
        if (this.searchText == '') {
          wx.showToast({
            title: '搜索内容不允许为空',
            icon: 'none',
            duration: 1500,
            mask: true
          })
          return
        }

        this.startId = 0;
        this.postList = []; //清空

        this.isloading = true,
          wx.showLoading({
            title: '搜索中',
          })
        uni.request({
          url: 'http://localhost:8081/blog/SearchDailies/' + this.searchText + '/' + this.dailyShortType,
          header: {
            'Content-Type': 'application/json', //自定义请求头信息
            'Access-Control-Allow-Headers': 'appId',
            'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
            'Access-Control-Max-Age': 86400,
            'Authorization': '' + wx.getStorageSync('sessionID')
          },
          method: 'GET',
          success: res => {
            if (res.data.data.length == 0) { //如果后端帖子到底
              this.requestcontent = false
              wx.showToast({
                title: '没有更多内容啦~',
                icon: 'none',
                duration: 1500,
                mask: true
              })
            } else {
              this.requestcontent = true; //表明后台还有帖子
              res.data.data.forEach(item => { //将帖子保存进postList
                this.postList.push(item);
              })
              this.startId = this.postList[this.postList.length - 1].id; //获取最后一个帖子的id，用于加载下一波帖子
              console.log(this.postList);
            }
          },
          complete: () => {
            wx.hideLoading(),
              this.isloading = false
          }
        })
      },
      goTopostDetail: function(item, index) { //进入帖子细节
        getApp().globalData.postDetail = []; //先清空
        getApp().globalData.postDetail.push(item); //将当前帖子内容保存进全局变量postDetail数组里
        uni.navigateTo({
          url: '/pages/postDetail/dailyPostDetail'
        })
      },
      goToOwnSpace(tarId, tarName, chooseAvatar) {
        getApp().globalData.chooseTarId = tarId;
        getApp().globalData.chooseTarName = tarName;
        getApp().globalData.chooseAvatar = 'https://flyingfeather-1320611290.cos.ap-guangzhou.myqcloud.com/' +
          chooseAvatar;
        uni.navigateTo({
          url: '/pagesA/ownspace/user-space'
        })
      }
    },
  };
</script>

<style lang="scss" scoped>
  @import url('../../static/css/poststyle.scss');

  .content {
    background-image: url();
    /* 图片素材background_1.jpg */
    background-size: cover;
    background-attachment: fixed;
    height: 200vh;
    width: 100vw;

    display: flex;
    /* 弹性布局 */
    flex-direction: column;
    /* 设置从上往下布局 */
    align-items: center;
    /* 水平居中 */
  }
</style>